<!--
 * @Author: hyq
 * @LastEditors: hyq
 * @Description: 
 * @Date: 2023-12-12 13:51:19
-->
<template>
  <view v-if="props.show" class="popup" :class="{ 'tab-popup': props.tabShow }">
    <view class="layer"></view>
    <view class="content" :class="[props.pos, { 'bg-White': hasBgColor }]">
      <slot></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import { withDefaults, defineProps, watch } from 'vue'
const props = withDefaults(
  defineProps<{
    show: boolean
    round?: boolean
    pos?: string
    tabShow?: boolean
    hasBgColor?: boolean
  }>(),
  {
    show: false,
    round: false,
    pos: 'bottom',
    tabShow: false,
    hasBgColor: true
  }
)

watch(
  () => {
    props.tabShow
  },
  newval => {
    console.log(newval)
  }
)
</script>

<style scoped lang="scss">
.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  .layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5rpx);
    // opacity: 0.4;
  }
  .content {
    position: relative;
    z-index: 999;
  }
  .bg-White {
    background-color: #262626;
  }

  .bottom {
    width: 750rpx;
    bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    align-self: flex-end;
    border-radius: 24rpx 24rpx 0 0;
  }
  .center {
    width: 560rpx;
    border-radius: 8rpx;
  }
}
.tab-popup {
  bottom: 50px !important;
}
</style>
